<template>
  <el-scrollbar class="sh">
    <ul class="tab">
      <li
        v-for="(item, index) in data"
        v-cloak
        :key="item.id"
        :class="[indexActive === index ? 'active' : '', 'no-select']"
        @click="() => handleTab(item, index)"
      >
        {{ item.text }}
        <span class="t1 tl1"></span>
        <span class="t2 tl2"></span>
        <span class="t1 tr1"></span>
        <span class="t2 tr2"></span>
        <span class="t1 bl1"></span>
        <span class="t2 bl2"></span>
        <span class="t1 br1"></span>
        <span class="t2 br2"></span>
      </li>
    </ul>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import type { ITab } from '@/types/tab'
import { ref } from 'vue'
defineProps<{
  data: ITab[];
}>()
const indexActive = ref(0)

const emits = defineEmits<{
  (e: 'handleTab', value: string): void;
}>()
// 点击Tab
const handleTab = (item: ITab, index: number) => {
  indexActive.value = index
  // console.log('item:', item)
  emits('handleTab', item.id)
}
</script>

<style lang="scss" scoped>
$color: #29f1fa;
.sh {
  height: 3.5rem;
  width: 100%;
}
.tab {
  display: flex;
  flex-wrap: nowrap;
  li {
    padding: 0.8rem 1.5rem;
    box-sizing: border-box;
    cursor: pointer;
    white-space: nowrap;
    & + li {
      margin-left: 1.5rem;
    }
    &:hover {
      @extend .active;
    }
  }
}
.active {
  background: rgba($color, 20%);
  position: relative;
  .t1 {
    position: absolute;
    width: 10px;
    height: 1px;
    background-color: $color;
  }
  .t2 {
    position: absolute;
    width: 1px;
    height: 10px;
    background-color: $color;
  }
  .tl1,
  .tl2 {
    top: 0;
    left: 0;
  }
  .tr1,
  .tr2 {
    top: 0;
    right: 0;
  }
  .bl1,
  .bl2 {
    bottom: 0;
    left: 0;
  }
  .br1,
  .br2 {
    bottom: 0;
    right: 0;
  }
}
</style>
